<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="mvc" %>
<%@ include file="nav.jsp"%>
<%@ include file="logo.jsp"%>
<%@ include file="item.jsp"%>
<%@ include file="footer.jsp" %>
<rapid:override name="contentContainer">
<div class="container">
	<div class="row">
		<div class="col-xs-0 col-md-12 col-lg-12 center">
			<img src="/pethub/images/welcome.gif" />
		</div>
		<div class="col-xs-12 col-md-12 col-lg-12 min-height">
			<div id="articles" class="col-xs-12 col-md-8 col-lg-8 float-left">
				
			</div>
			<div class="col-xs-12 col-md-4 col-lg-4  float-left">
				<div class="col-xs-12 col-md-12 col-lg-12">
					<div style="border:1px solid #1ba2b2;padding-top:5px;padding-bottom:5px;padding-left:2px;padding-right:2px;border-radius:5px;">
						<div style="background-color:#1ba2b2;text-align:center;color:white;">
							<h2 class="pane-title">搜索框</h2>
						</div>
						<div class="container">
							<div class="input-group">
							<input type="text" class="form-control input-lg" style="height:3em;" id="searchTitle">
							<span class="input-group-addon btn btn-primary" style="cursor:pointer;" onclick="findTitle(this)">搜索</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-md-12 col-lg-12">
					<div style="border:1px solid #1ba2b2;padding-top:5px;padding-bottom:5px;padding-left:2px;padding-right:2px;border-radius:5px;">
						<div style="background-color:#1ba2b2;text-align:center;color:white;">
							<h2 class="pane-title">条目</h2>
						</div>
						<table class="table">
							<tbody>
								<tr><td><a href="/pethub/tags/success-stories">成功故事</a></td></tr>
								<tr><td><a href="/pethub/tags/pet">动物故事</a></td></tr>
								<tr><td><a href="/pethub/tags/news">新闻</a></td></tr>
							</tbody>
							
						</table>	
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="container-page">
				<ul class="pagination-page" id="pageNum">
					<li><a href="javascript:void(0)" onclick="changePage('上一页')">上一页</a></li>
					<li><a href="javascript:void(0)" onclick="changePage('下一页')">下一页</a></li>
				</ul>
			</div>
		</div>
	 </div>
 </div>

</rapid:override>

<%@ include file="base.jsp" %>
<script type="text/javascript">
	var pageNum = 0
 	window.onload= function(){
		pageNum = pageNum +1;
 		ajaxPOST(pageNum,'');
 	}
 	
 	function changePage(page){
 		switch (page){
 			case "上一页" :console.log(page.innerHTML);pageNum = pageNum>1?pageNum:pageNum-1;ajaxPOST(pageNum,'');break;
 			case "下一页" :console.log(page.innerHTML);pageNum = pageNum+1;ajaxPOST(pageNum,'');break;
 		}
 		
 	}
 	
 	function ajaxPOST(page,name){
 		document.getElementById("articles").innerHTML=""
 		$.ajax({
 			url:"/pethub/article_data",
 			data:{'page':page,'name':name},
 			type:'POST',
 			success:function(data){
 				result = JSON.parse(data)
 				for (var i=0,length=result.length;i<length;i++){
 					
 					var boxdiv = document.createElement("div");
 						boxdiv.className="col-xs-12 col-md-12 col-lg-12";	
 						boxdiv.innerHTML = 
		 					'	<div class="box float-left center">'
							+'      <div class="innerbox">'
							+'	<a href="/pethub/article"><div class="imageBlock">'
						    +' <img src="'+result[i]['imageUrl']+'" style="width:258px;"/>'
						    +'  <div class="imageBlock__overlay">'
						    +'  </div>'
						    +'  <div class="imageBlock__circle">'
						    +'  </div>'
						    +'</div></a>'
							+'	<div class="center"><h2>'+result[i]['title']+'</h2>	</div>'
							+'</div>'
							+'<div class="innerbox">'
							+'	<div>'+result[i]['content']+'</div>'
							+'</div>'
							+'</div>';
							
						document.getElementById("articles").append(boxdiv);
 				}
 			}
 		});
 	}
 	
 	function getToElement(evt) {
        var node;
        if (evt.type == 'mouseout') {
            node = evt.relatedTarget;
        } else if (evt.type == 'mouseover') {
            node = evt.target;
        }

        if (!node) {
            return;
        }

        while (node.nodeType != 1) {
            node = node.parentNode;
        }
        return node;
    }

    HTMLElement.prototype.isChildOf = function (elem) {
        if (elem && elem.children) {
            for (var i = 0; i < elem.childElementCount; i++) {
                var child = elem.children[i];
                if (child == this) {
                    return true;
                } else if (child.childElementCount > 0) {
                    return this.isChildOf(child);
                }
            }
        }
        return false;
    }

    var block = document.getElementsByClassName("imageblock")[0];
    block.addEventListener('mouseout', function (evt) {

        var toElement = evt.toElement || getToElement(evt);
        if (toElement == this || toElement.isChildOf(this)) {
            console.log('Does NOT really move out');
        } else {
            console.log('Really moved out');
            if (this.classList.contains('isActive')) {
                this.classList.remove('isActive');
            }
        }

    }, false);

    block.addEventListener('click', function (evt) {
        if (!this.classList.contains('isActive')) {
            this.classList.add('isActive');
        }
    }, false)
    
    function findTitle(title){
    	var title = document.getElementById("searchTitle");
    	ajaxPOST(1,title.value);
    }
 </script>